<template>
  <div class="address">
    <div class="main">
      <div class="li" v-for="(item,index) in form.list" :key="index" @click="goDetailsAddress(item)">
        <div class="default" v-if="item.is_default === 1">默认</div>
        <div class="left">
          <img src="@/assets/images/ic_address.png" alt="">
          <div class="sp">
            <span class="sp1">{{item.name}}  <span class="sp2">{{item.mobile}}</span></span>
            <span class="sp3">{{item.region_name}} {{item.address_detail}}</span>
          </div>
        </div>
        <div class="right" @click.stop="editAddress('edit',item)"  v-if="!detailsAddress">
          <div style="width: 1px;height: 54px;background: #F6F6F6"></div>
          <img src="@/assets/images/ic_editor.png" alt="">
        </div>
      </div>
    </div>
    <div class="btn" v-if="!detailsAddress||form.list.length === 0">
      <input type="button" value="新增收货地址" @click="editAddress('add')">
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/17 16:21.
   */
  import {Indicator} from 'mint-ui';
  import utils from '@/lib/StringExtend'

  export default {
    mounted() {
      this.loadData();
    },
    components: {},
    props: {},
    data() {
      return {
        wechatId: utils.getCookie('wechat_id'),
        detailsAddress:this.$route.query.detailsAddress,
        form: {
          list: []
        }
      }
    },
    computed: {},
    methods: {
      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        Indicator.open('加载中...');
        this.$axios.addressList(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.form = res.data;
          if (res.data.list.length === 0){
            this.$store.commit('setDetailsAddress', undefined);
          }
        })
      },
      /*
      * 
      * 编辑地址
      * */
      editAddress(type, item) {
        this.$router.push({
          path: '/editAddress',
          query: {methods: type, form: item}
        })
      },
      goDetailsAddress(item){
        if (!this.detailsAddress) {
          return;
        }
        this.$store.commit('setDetailsAddress', item);
        this.$router.go(-1)
      }
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .address {
    width: 100%;
    height: 100%;
    background: white;

    .main {
      width: 100%;
      padding-left: 0.36rem;
      box-sizing: border-box;

      .li {
        width: 100%;
        /*height: 1.6rem;*/
        padding: 0.24rem 0;
        border-bottom: 1px solid #F6F6F6;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: relative;

        .default {
          position: absolute;
          width: 0.79rem;
          height: 0.3rem;
          color: white;
          background: #FF695A;
          font-size: 0.21rem;
          text-align: center;
          border-radius: 0px 0px .10rem 0;
          top: 0;
          left: -0.36rem;
        }

        .left {
          display: flex;
          flex-direction: row;
          align-items: center;

          img {
            width: 0.65rem;
            height: 0.64rem;
            margin-right: 0.22rem;
          }

          .sp {
            display: flex;
            flex-direction: column;


          }

          .sp1 {
            width: 5rem;
            font-size: 0.3rem;
            color: #333333;
            margin-bottom: 0.05rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
          }

          .sp2 {
            font-size: 0.26rem;
            margin-bottom: 0.02rem;
            color: #333333;
          }

          .sp3 {
            width: 5rem;
            font-size: 0.24rem;
            color: #333333;
            text-overflow: ellipsis;
            overflow: hidden;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            -webkit-line-clamp: 2;
          }
        }

        .right {
          display: flex;
          flex-direction: row;
          align-items: center;

          img {
            width: .34rem;
            height: 0.4rem;
            margin-right: 0.36rem;
            margin-left: 0.41rem;
          }
        }
      }
    }

    .btn {
      width: 100%;
      height: 1rem;
      position: fixed;
      bottom: 0rem;
      left: 0;
      right: 0;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;

      box-shadow: 0px -4px 12px 0px rgba(240, 240, 240, 0.7);

      input[type='button'] {
        border-radius: 0.4rem;
        height: 0.8rem;
        width: 6.96rem;
        background: linear-gradient(45deg, rgba(253, 180, 5, 1), rgba(253, 204, 74, 1));
        border: 0;
      }
    }
  }
</style>
